<script setup>
import { ref, watch } from 'vue'
import MyProgress from "@/components/my-progress.vue"
import { onReady,onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores'

// 用户信息
const userInfo = ref(useUserStore().getUserInfo())
const age = ref(userInfo.value ? userInfo.value.userAge : '')
const stature = ref(userInfo.value ? userInfo.value.userStature : '')
const weight = ref(userInfo.value ? userInfo.value.userWeight : '')

// 监听数据是否更新
onShow(() => {
    userInfo.value = useUserStore().getUserInfo()
    age.value = userInfo.value.userAge
    stature.value = userInfo.value.userStature
    weight.value = userInfo.value.userWeight
})

//弹出层逻辑
const popup = ref(null)
const openToggle = () => {
    popup.value.open('bottom')
}

// 跳转计算身体信息
const toComputeUserdata = () => {
    uni.navigateTo({
        url: '/pages/ComputeUserdata/ComputeUserdata'
    })
}

//BMI弹出层表格数据
const MinibmiValue = ref('<= 18.4')
const MaxBMIValue = ref('>= 28')


//  体重图表数据
const BodyweightChartData = ref({})
const BodyweightOpts = ref({
    timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ["#0052d9","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        fontSize: 12,
        fontColor: "#666666",
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: true,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: false,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 13,
          lineHeight: 20,
          marginTop: 0,
          itemCount: 5,
          rotateLabel: false,
          rotateAngle: 45,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          format: ""
        },
        yAxis: {
          gridType: "solid",
          dashLength: 2,
          disabled: true,
          disableGrid: false,
          splitNumber: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: false,
          data: []
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "none",
            onShadow: false,
            animation: "vertical"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: []
        }
    }
})

// 身体尺寸图表数据
const BodysizeChartData = ref({})
const BodysizeOpts = ref({
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ["#9A60B4","#ea7ccc","#EE6666","#73C0DE","#3CA272","#FC8452"],
        padding: [15,10,0,15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: true,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 10,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: false,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 12,
          lineHeight: 20,
          marginTop: 0,
          rotateLabel: false,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          format: ""
        },
        yAxis: {
          gridType: "solid",
          dashLength: 2,
          disabled: true,
          disableGrid: false,
          splitNumber: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: false,
          data: []
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "none",
            onShadow: false,
            animation: "vertical"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: []
          }
        }
        })

onReady(() => {
    getBodyweightChartsData()
    getBodysizeChartsData()
})
// 获取身体重量图表数据
function getBodyweightChartsData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
        categories: ["9/10","9/11","9/12","9/13","9/14","9/15","9/16","9/17"],
        series: [
            {
            name: "体重数据",
            data: [72.4,71.5,70.1,69.8,67.4,66.4,66.5,66.1]
            }
            ]
          };
          BodyweightChartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
}
// 获取身体尺寸图表数据
function getBodysizeChartsData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["9/19","9/20","9/21","9/22","9/23","9/24"],
            series: [
              {
                name: "腰围",
                data: [35,8,25,37,4,20]
              },
              {
                name: "臂围",
                data: [70,40,65,100,44,68]
              },
              {
                name: "臀围",
                data: [100,80,95,150,112,132]
              }
            ]
          };
          BodysizeChartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
}
</script>

<template>
    <!-- 头部 -->
    <header>
        <div class="header-box">
            <image src="@/assets/img.png"
            @error="imageError"></image>
        </div>
        <div class="half-circle"></div>
    </header>
    <!-- 卡片组 -->
    <div class="cart-group">
        <!-- 个人信息 -->
        <div class="cart-group-first">
            <uni-card title="个人信息">
                <template #extra>
                    <button 
                    @click="toComputeUserdata"
                    type="default" size="mini" 
                    style="margin-right:0;background-color:#0052d9;color: white;">
                    计算信息</button>
                </template>
                <!-- 组头部 -->
                <div class="calHeader">
                    <p>每日总热量建议</p>
                </div>
                <!-- 总热量建议 -->
                <div class="calTotal">
                    <div class="total">3229</div>
                    <p style="margin: 15px 0 0 5px;color: #444;">千卡</p>
                    <p style="margin: 15px 0 0 auto;">{{ age }}岁 / {{ weight }}公斤/ {{ stature }}cm</p>
                </div>
                <!-- 三大营养素分配卡片组 -->
                <div class="calAllocate">
                    <div class="cal-card">
                        <p style="font-weight: 600;">碳水</p>
                        <view class="progress-box">
                            <progress 
                            :percent="40"
                            stroke-width="3" 
                            border-radius="5"
                            activeColor="#F5DEB3"
                            backgroundColor="#fff"
                            active="true" />
                        </view>
                        <p style="color: #999;">0/234g</p>
                        <p style="color: #008000;">剩余234g</p>
                    </div>
                    <div class="cal-card">
                        <p style="font-weight: 600;">蛋白质</p>
                        <view class="progress-box">
                            <progress 
                            :percent="60"
                            stroke-width="3" 
                            border-radius="5"
                            activeColor="#cca4ff"
                            backgroundColor="#fff"
                            active="true" />
                        </view>
                        <p style="color: #999;">0/234g</p>
                        <p style="color: #008000;">剩余234g</p>
                    </div>
                    <div class="cal-card">
                        <p style="font-weight: 600;">脂肪</p>
                        <view class="progress-box">
                            <progress 
                            :percent="40"
                            stroke-width="3" 
                            border-radius="5"
                            activeColor="#FFFCCC"
                            backgroundColor="#fff"
                            active="true" />
                        </view>
                        <p style="color: #999;">0/234g</p>
                        <p style="color: #008000;">剩余234g</p>
                    </div>
                </div>
            </uni-card>
        </div>
        <!-- BMI -->
        <uni-card title="身体质量指数" >
            <div class="BMIheader">
                <div class="BMIheader-left">
                    <div class="BMIheader-left-icon">
                        <uni-icons color="#0052d9" type="star-filled" size="50"></uni-icons>
                    </div>
                    <div class="BMIheader-left-text">
                        <view style="font-weight: 600;;font-size: larger;">BMI指数
                            <uni-icons @click="openToggle()" color="#999" type="help" size="18"></uni-icons>
                        </view>
                        <p>超重</p>
                    </div>
                </div>
                <div class="BMIheader-right">
                    24.6
                </div>
            </div>
            <div class="BMIfooter">
                <view class="content">
                    <MyProgress :nowD="24.6" :sumD="40" :content='"超重"' :contentColor='"rgba(3,144,252,1)"' :contentBacColor='"#ffffff"' :time="3000" :wid="280" :type='"ease"'></MyProgress>
                </view>
            </div>
            <view>
			<!-- 提示窗 -->
            <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
                <div class="BMIpopup">
                    <div class="popup-header">
                        中国成年人BMI标准
                    </div>
                    <div class="popup-body">
                        <uni-table border stripe emptyText="暂无更多数据" >
                            <!-- 表头行 -->
                            <uni-tr>
                                <uni-th align="center">分类</uni-th>
                                <uni-th align="center">BMI范围</uni-th>
                            </uni-tr>
                            <!-- 表格数据行 -->
                            <uni-tr>
                                <uni-td align="center">偏瘦</uni-td>
                                <uni-td align="center"> {{ MinibmiValue }} </uni-td>
                            </uni-tr>
                            <uni-tr>
                                <uni-td align="center">正常</uni-td>
                                <uni-td align="center">18.5 ~ 23.9</uni-td>

                            </uni-tr>
                            <uni-tr>
                                <uni-td align="center">过重</uni-td>
                                <uni-td align="center">24.0 ~ 27.9</uni-td>
 
                            </uni-tr>
                            <uni-tr>
                                <uni-td align="center">肥胖</uni-td>
                                <uni-td align="center">{{ MaxBMIValue }}</uni-td>
                            </uni-tr>
                        </uni-table>
                        <view style="display:flex;justify-content: center;margin:4px auto;font-size: 12px;">计算公式:BMI = 体重[kg] ÷ (身高[m])²</view>
                        <!-- 内容卡片 -->
                        <uni-card title="超重和肥胖的BMI有哪些常见的健康后果？" >
                            <p>根据世卫组织的描述，BMI的升高是非传染性疾病的一个主要风险因素，如：</p>
                            <view>
                                <ul style="margin-left: 10px;">
                                    <li>①心血管疾病（主要是心脏病和中风）</li>
                                    <li>②糖尿病</li>
                                    <li>③肌肉骨骼疾患（特别是骨关节炎——关节的一种高度致残退行性疾病）</li>
                                    <li>④某些癌症（包括子宫内膜、乳腺、卵巢、前列腺、肝脏、胆囊、肾脏和结肠）</li>
                                </ul>
                            </view>

                            <p>随着身体质量指数的升高，非传染性疾病的患病风险也随之提高。</p>
                            <p>儿童期肥胖会使成年期肥胖、早逝和残疾出现的几率更大。但是，除了未来风险升高之外，肥胖儿童还会经历呼吸困难、骨折风险升高、高血压、心血管疾病的早期征兆、胰岛素耐受及心理影响。</p>
                         </uni-card>
                         <uni-card title="BMI体重不足的相关的风险" >
                            <p>BMI计算器的结果是体重不足，可能会受到与之相关的风险，列举如下：</p>
                            <view>
                                <ul style="margin-left: 10px;">
                                    <li>①营养不良、维生素缺乏、贫血（携带血管的能力降低）</li>
                                    <li>②骨质疏松症，一种导致骨质疏松的疾病，增加骨折的风险</li>
                                    <li>③免疫功能下降</li>
                                    <li>④生长和发育问题，特别是在儿童和青少年中</li>
                                    <li>⑤女性可能会出现生殖问题，因为荷尔蒙失调可能会扰乱月经周期，体重过轻的女性在怀孕的前三个月流产的几率也比较高</li>
                                    <li>⑥手术的潜在并发症</li>
                                </ul>
                            </view>
                            <p>在某些情况下，体重不足可能是一些潜在条件或疾病的标志，如神经性厌食症，这也有其风险。如果BMI计算器的结果是体重不足或非常低的BMI，特别是如果体重不足的原因似乎并不明显，请咨询你的医生。</p>
                         </uni-card>
                         <uni-card title="如何保持良好的BMI或减少超重和肥胖？" >
                            <p>超重和肥胖，以及与之相关的非传染性疾病，在很大程度上是可以预防的。根据世卫组织的建议，人们可以：</p>
                            <view>
                                <ul style="margin-left: 10px;">
                                    <li>①减少总脂肪和糖的能量摄入</li>
                                    <li>②增加水果、蔬菜以及豆类、全谷类及坚果的食用量</li>
                                    <li>③定期进行身体运动（儿童每天60分钟，成人每周150分钟）</li>
                                </ul>
                            </view>
                            <p>建议密切关注BMI计算器，了解你的BMI变化，以保持良好和健康的体重。</p>
                         </uni-card>
                    </div>
                </div>
            </uni-popup>
		</view>
        </uni-card>
        <!-- 体重数据 -->
        <uni-card title="体重数据">
            <template #extra>
                <button 
                    type="default" size="mini" 
                    style="margin-right:0;background-color:#0052d9;color: white;">
                    数据记录
                </button>
            </template>
            <!-- 身体数据表 -->
            <view class="charts-box">
            <qiun-data-charts 
                type="line"
                :opts="BodyweightOpts"
                :chartData="BodyweightChartData"
                :tooltipShow="false"
                :tapLegend="false"
                :ontouch="true"
                :onmouse="false"
                :onzoom="true"
            />
            </view>
        </uni-card>
        <!-- 身体维度数据 -->
        <uni-card title="身体维度" extra="额外信息">
            <template #extra>
                <button type="default" size="mini" 
                    style="margin-right:0;background-color:#0052d9;color: white;">
                    数据记录
                </button>
            </template>
        <!-- 身体维度数据表 -->
            <view class="charts-box">
                <qiun-data-charts 
                type="line"
                :opts="BodysizeOpts"
                :chartData="BodysizeChartData"
                :ontouch="true"
                />
            </view>
        </uni-card>
    </div>

</template>

<style scoped lang="scss">  
.header-box {
  height: 200px;
  background-image: linear-gradient(to bottom, #0052d9, transparent);
  image {
    margin-bottom: -10px;
    width: 30%;
    height: 50px;
  }
}


.cart-group{
    .cart-group-first{
        margin-top: -160px;
        .calHeader{
            display: flex;
        }
        .calTotal{
            display: flex;
            .total {
                margin-top: 10px;
                font-size: 2rem;
                font-weight: 900;
                color: #0052d9;
            }
        }
        .calAllocate {
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
            .cal-card {
                padding: 6px;
                width: 28%;
                background-color: #F6F6F6;
                border-radius: 5px;
                .progress-box{
                    margin: 5px 0 5px 0;
                }
            }
        }
    }
}

.BMIheader{
    display: flex;
    margin-top: 5px;
    .BMIheader-left{
        display: flex;
        .BMIheader-left-icon{
            margin-top: 8px;
        }
        .BMIheader-left-text{
            margin-left: 8px;
        }
    }
    .BMIheader-right{
        margin-top: 10px;
        font-size: 1.5rem;
        margin-left: auto;
        font-weight: 700;
    }
}

.BMIfooter{
    margin-top: 10px;
}



.BMIpopup{
    display: flex;
    flex-direction: column;
    height: 60vh;
    .popup-header{
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .popup-body{
        margin-top: 10px;
        flex-grow: 1;
        overflow-y: auto;
        max-height: 60vh;
    }
}

.charts-box {
    width: 100%;
    height: 100%;
}


</style>